<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<script type="text/javascript">
		//js与css交互
		window.onload=function(){
//			document.getElementById("v1").style.background="yellow";
//			document.getElementById("v1").style.fontSize="3em";
//			document.getElementById("v1").style.color="blue";
//			document.getElementById("v2").style.height="200px";
			//1.修改每个th td的颜色
			var th=document.getElementsByTagName("th");
			var td=document.getElementsByTagName("td");
			for(var i=0;i<th.length;i++){
				th[i].style.background="yellow";
			}
			for(var i=0;i<td.length;i++){
				td[i].style.background="blue";
			}
			//2.从数据列表开始，奇数行为蓝色，偶数行为红色（js代码生成）
			
			var but=document.getElementById("but");
			but.onclick=function(){
				var table=document.getElementsByTagName("table")[0];
				var trr=document.createElement("tr");
				table.appendChild(trr);
				for(var i=0;i<5;i++){
					var tdd=document.createElement("td");
					tdd.appendChild(document.createTextNode("1"));
					trr.appendChild(tdd);
				}
				var tr=document.getElementsByTagName("tr");
			for(var i=4;i<tr.length;i++){
				var ff=tr[i].children;
				for(var j=0;j<ff.length;j++){
					if((i+1)%2==0){
						ff[j].style.background="red";
					}else{					
						ff[j].style.background="blue";
					}
				}
			}
		}
			}
			
	</script>
	</head>
	<body>
		<!--<h1 id="v1">hello word</h1>
		<h1 id="v2">hello word</h1>
		<h1>hello word</h1>-->
		<table border="1">
				<tr>
					<th class="" >部门名称</th>
					<th class="">部门电话</th>
					<th class="">部门负责人</th>
					<th class="">所属单位</th>
					<th class="">操作</th>
				</tr>
				<tr id="xy">
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
				</tr>
				<tr class="tt">
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
				</tr>
				<tr>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
				</tr>
				
		</table>
		<button id="but">添加一行</button>
	</body>
</html>
